<template>
    <fieldset>
        <legend>商品列表</legend>
        <h1>商品:Product</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>产品名称:{{item.title}}</b>
                ------
                <b>价格:{{item.price}}</b>
                ------
                <b>库存:{{item.inventory}}&nbsp;</b>
                <button @click="add_cart(item)" :disabled='item.inventory===0'>+加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
import {mapActions, mapMutations, mapState} from 'vuex'
    export default {
        mounted () {
            this.FETCH()
        },
        methods: {
            ...mapActions('products',['FETCH']),
            ...mapActions('carts',['ADD_CART']),
            add_cart(item){
                this.ADD_CART(item)
            }
        },
        computed: {
            ...mapState('products',['productData']),
            // ...mapState('carts',['cartData'])
        }
    }

</script>